Stadium

Appearance

맵 만들기 ​

다음 개념을 사용합니다:

새 Stadium을 만들고 맵에 스프라이트를 추가해보겠습니다. 만들어볼 맵은 다음과 같습니다. 아래 맵은 브라우저에서 Stadium을 통해 직접 그려졌습니다.

아직 라이브러리가 설치되지 않았다면 다음 명령어로 설치해주세요.

bash
pnpm add @rycont/stadium

구성 ​

Stadium은 div에 렌더링 되기 때문에, 먼저 올바른 div를 만들어주어야 합니다.

html
<div id="stadium"></div>

라이브러리를 불러온 후, Stadium을 초기화합니다.

js
import { Stadium } from "@rycont/stadium"; 
const element = document.getElementById("stadium");

//prettier-ignore
const stadium = new Stadium(element, { 
  width: 800, 
  height: 600, 
});

스프라이트 만들기 ​

스프라이트는 맵에 그려지는 객체입니다. 이미지를 표시하는 스프라이트는 ImageSprite를 사용합니다.

이미지 스프라이트를 만들어 보겠습니다.

js
import {
  Stadium,
  ImageSprite, 
} from "@rycont/stadium";

const src = "https://picsum.photos/200";

const size = { width: 80, height: 80 };
const position = { left: 140, top: 240 };

const image = new ImageSprite({ src, size, position });

스프라이트를 맵에 추가하기 ​

스프라이트를 맵에 추가하기 위해서는 Stadium의 add 메소드를 사용합니다.

js
stadium.add(sprite);

전체 코드 ​

html
<div id="stadium"></div>
<script type="module">
  import { Stadium, ImageSprite } from "@rycont/stadium";

  const element = document.getElementById("stadium");

  const stadium = new Stadium(element, {
    width: 800,
    height: 600,
  });

  const src = "https://picsum.photos/200";
  const size = { width: 80, height: 80 };
  const position = { left: 140, top: 240 };

  const image = new ImageSprite({ src, size, position }); 
  stadium.add(image); 
</script>